/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <sf-form ref="form"
             class="label-form"
             :label-width="100">
        <sf-form-item>
            <sf-fieldlabel>
                <lang>项目名称</lang>
            </sf-fieldlabel>
            <sf-textfield
                ref="fieldName"
                v-model="submitData.name"
                :blur-trim="true"
                :default-width="defaultWidth"
                :max-length="30"
                :allow-blank="false"
                :utf8-length="false"
                vtype="name"
                :placeholder="_('请输入项目名称')" />
        </sf-form-item>
        <sf-form-item>
            <sf-fieldlabel>
                <lang>描述</lang>
            </sf-fieldlabel>
            <sf-textarea
                v-model="submitData.description"
                :default-width="defaultWidth"
                :max-length="300"
                :utf8-length="false"
                :placeholder="_('最多300字（选填）')" />
        </sf-form-item>
    </sf-form>
</template>
<script lang=ts>
import { Component, Vue } from 'vue-property-decorator';
const DEFAULT_WIDTH = 336;
const DEFAULT_VALUE = {
    name: '',
    description: ''
};

@Component
export default class AddProjectForm extends Vue {

    submitData = { ...DEFAULT_VALUE }

    get defaultWidth () {
        return DEFAULT_WIDTH;
    }

    getJsonValue () {
        return this.submitData;
    }

    setJsonValue (data: typeof DEFAULT_VALUE) {
        this.submitData = {...DEFAULT_VALUE, ...data};
    }
};
</script>
<style lang="less" scoped>
.label-form {

}
</style>
